<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>我收藏的</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				/* margin: 0; */
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
			}
			/* 用户 */
			.user-name{
				font-size :0.75rem;
				color:gray;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
			
			
			/* 卡片主内容左右边距 */
			.my-data{
				padding-right: 7rem;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 标题栏 -->
			<header class="bar bar-nav" style="background-color: yellow;">
				<a class="icon icon-left button button-link pull-left" href="market-mymainpage.html" style="color: black;"></a>
				<h1 class="title" style="color: #000000;">我收藏的</h1>
			</header>
			
			<!-- 页面内容 -->
			<div class="content">
				<!-- 主内容 -->
				<div class="list-block">
					<div class="list-block media-list" v-for="collect in collects">
						<ul>
						  <li>
							<div class="card-header no-border">
								<a @click="goUser(collect.commodity.user.id)" href="#">
									<div class="facebook-avatar">
									  <img :src="imgSrc(collect.commodity.user.photo)" width="40" height="40">
									</div>
								</a>
								<div class="user-name">{{collect.commodity.user.nickname}}</div>
							</div>
							<a @click="goCommodity(collect.commodity.id)" href="#" class="item-link item-content">
							  <div class="item-media">
								  <img :src="imgSrc(collect.commodity.picture)" style='width: 3.5rem;'>
							  </div>
							  <div class="item-inner">
								<div class="item-title-row">
								  <div class="item-title">
									  <span class="commodity-title">
										{{collect.commodity.title}}<br/>
									  </span>
								  </div>
								</div>
								<div class="item-subtitle" style="padding-top:10px">
									<span class="commodity-price">
										￥{{collect.commodity.price}}
									</span>
								</div>
							  </div>
							</a>
							<div class="item-inner" v-if="collect.collectStatus==true" >
								<button class="button pull-right" @click="changeCollect(collect.commodity.id,collect.collectStatus)"
								style="color: black;border-color:#C2BE9E;margin-left:200px">
									<span class="icon iconfont icon-favorfill"></span>取消收藏
								</button>
							</div>
							<div class="item-inner" v-else="collect.collectStatus==false">
								<button class="button pull-right" @click="changeCollect(collect.commodity.id,collect.collectStatus)"
								style="color: black;border-color:yellow;margin-left:200px;background-color: yellow;">
									<span class="icon iconfont icon-favor"></span>添加收藏
								</button>
							</div>
						  </li>
						</ul>
					  </div>	
				</div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		
		<script>
			//获取URL参数
			var loginuserid = getUrlParam('loginuserid');
			
			//VUE
			var app = new Vue({
				el:"#app",
				data:{
					loginuser:null,
					collects:[]
				},
				created() {
					//初始加载用户
					this.inituser();
					//初始加载收藏商品
					this.initcollects();
				},
				// 方法
				methods:{
					inituser: function() {
						axios.get(serviceIP+"/market/inituser?userid=" + loginuserid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.loginuser = result.data.data;
						});
					},
					initcollects: function() {
						axios.get(serviceIP+"/market/searchicollect?loginuserid=" + loginuserid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.collects = result.data.data;
							this.collects.forEach((colloct)=>{
								// 是否收藏,收藏为true,初始都为收藏
								colloct.collectStatus = true
							})
							console.log('我的收藏',this.collects)
							//alert(result.data.code);
						});
					},
					changeCollect: function(id,collectstatus) {
						//alert(index+id+loginuserid+collectstatus);
						//console.log(this.collects[index]);
						$.confirm('确定取消收藏该商品？', function() {
							axios.get(serviceIP+"/market/changecollectstatus?commodityid="+id
										+"&loginuserid="+loginuserid+"&collectstatus="+collectstatus,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
								if (result.data.code == 200) {
									$.toast("操作成功!","10000");
									// this.collects[index].collectStatus=result.data.data
									window.location.reload()
								} else {
									$.toast("操作被打断，请重试！");
								}
							});
						});
					},
					
					//跳转上层打开页面
					goBack:function(){
						window.history.go(-1)
					},
					//图片映射
					imgSrc: function(src) {
						return src;
					},
					//跳转用户页面
					goUser:function(id){
						window.location="market-user.html?userid="+id
					},
					//跳转商品页面
					goCommodity:function(id){
						window.location="market-commodity.html?commodityid="+id
					},
					
				},
			});
		</script>

		<script>
			$.init();
		</script>
	</body>

</html>
